<template>
  <view class="container-style padding-top-2">
    <view style="padding: 10rpx 20rpx">
      <u-search height="80rpx" shape="square" searchIconSize="40" borderColor="#999" bgColor="#fff"
        v-model="searchKeyword" :clearable="false" placeholder="请输入小区名称" @search="onSearch" @clear="onSearch" />
    </view>
      <view v-for="(item, index) in listData" :key="index"
        class="item-style background-color-white margin-bottom-2 padding-2" @click="onChange(item)">
        <view class="left-part">
          <image style="width: 120rpx; height: 120rpx; border-radius: 20rpx"
            src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/04/10/xiaoqu1_20250410154558A017.jpg">
          </image>
        </view>
        <view class="right-part margin-left-2" style="max-width: calc(100% - 150rpx)">
          <view class="title font-semibold margin-bottom-1 color-black width-100 base-ellipsis font-size-16">
            {{ item.name }}
          </view>
          <view
            class="address-info display-inline-block color-grey margin-bottom-1 base-ellipsis font-size-12 width-100">
            <!-- <image
							class="icon-style margin-right-1 vertical-align-top"
							src="@/static/tempIcon/address.png"></image> -->
            {{ item.ebSystemCityName + " " + item.fullAddress }}
          </view>
        </view>
      </view>
      <!-- <u-loading
				v-if="loading"
				class="loading-style"
				mode="circle"/> -->
      <u-empty v-if="!loading && listData.length === 0" class="empty-style" text="暂无数据" />
  </view>
</template>

<script>
import { comunityLists } from "../.././../utils/api/local.js";
export default {
  data() {
    return {
      loading: false,
      pageNum: 1,
      pageSize: 10,
      searchKeyword: "",
      listData: [],
      type: "",
      total: '',
    };
  },
  onLoad(option) {
    this.comunityList();
    this.type = option.type;
  },
  onReachBottom() {
    console.log("🚀 ~ onReachBottom ~ onReachBottom:")
    this.loadMoreData()
  },
  methods: {
    loadMoreData() {
      if (this.pageNum * this.pageSize >= this.total) {
        // 显示没有更多数据的提示
        uni.showToast({
          title: "没有更多数据了",
          icon: "none",
        });
        return;
      } else {
        this.pageNum++;
        this.comunityList();
      }
    },

    onSearch() {
      uni.showLoading({
        title: "加载中...",
      });
      this.pageNum = 1;
      this.listData = [];
      this.comunityList();
    },
    comunityList() {
      uni.showLoading({
        title: "加载中...",
      });
      var params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: this.searchKeyword,
      }
      comunityLists(params).then((res) => {
        this.listData = this.listData.concat(res.data.list);
        this.total = res.data.total;
        this.loading = false;
        uni.hideLoading();

      });
    },
    onChange(item) {
      uni.$emit("houseData", item);
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.serch_buttton {
  margin-bottom: 20rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  margin-left: 10rpx;
  margin-right: 10rpx;
  font-size: 14px;
}

.container-style {
  padding-top: 20rpx;
}

.padding-top-2 {
  padding-top: 20rpx;
}

.margin-bottom-2 {
  margin-bottom: 20rpx;
}

.scroll-view {
  margin-top: 20px;
  height: 100vh;
}

.item-style {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.left-part {
  flex: 0 0 auto;
}

.image-style {
  width: 100rpx;
  height: 100rpx;
}

.right-part {
  flex: 1;
  margin-left: 20rpx;
}

.title {
  font-weight: 600;
  margin-bottom: 10rpx;
  color: #000;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
}

.address-info {
  display: inline-block;
  color: #888;
  margin-bottom: 10rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  width: 100%;
}

.icon-style {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
  vertical-align: top;
}

.loading-style {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
}

.empty-style {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
}

.border-radius {
  border-radius: 10rpx;
}

.vertical-align-middle {
  vertical-align: middle;
}

.font-semibold {
  font-weight: 600;
}

.color-black {
  color: #000;
}

.color-grey {
  color: #888;
}

.width-100 {
  width: 100%;
}

.base-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.font-size-16 {
  font-size: 16px;
}

.font-size-12 {
  font-size: 12px;
}

.margin-left-2 {
  margin-left: 20rpx;
}

.margin-right-1 {
  margin-right: 10rpx;
}

.margin-top-1 {
  margin-top: 10rpx;
}

.margin-bottom-1 {
  margin-bottom: 10rpx;
}

.padding-2 {
  padding: 20rpx;
}
</style>
